<template>
    <div>
        <h1>待办事项</h1>
        <!--条件渲染：如果没有事项，则显示暂无待办项-->
        <p v-if="todos.length ===0">暂无待办事项</p>
        <ul v-else>
            <!--列表渲染：显示代办事项---->
            <li v-for="(rodo,index) in todos" :key="index">
                <!--属性绑定：通过v-bind 绑定样式------>
                <span>{{ todos.text }}</span>
                <button @click="removeTodo(index)">删除</button>
            </li>
        </ul>

        <!---双向数据绑定：通过v-model绑定输入框-->
        <input v-model="newTodo" :placeholder="inputPlaceholder"/>
        <button @click="addTodo">添加</button>

        <!--内容渲染：显示特办事项的数量-->
        <p>当前代办事项数：{{ todos.length }}</p>
    </div>
</template>

<script setup>
import {ref,reactive, compile} from 'vue'

//代办事项列表
const todos = reactive([])

//绑定输入框
const newTodo=ref('')

//placeholder
const inputPlaceholder = ref('请输入待办事项')

//删除待办事项
const removeTodo =(index) =>{
    todos.splice(index,1)
}

//添加待办事项
const addTodo=() =>{
    if(newTodo.value.trim() !==""){
        todos.push({text: newTodo.value, completed:false});
        newTodo.value=''
    }
}
</script>